html {
  font-size: 62.5%;
}

body {
  font-family: $main-font;
  margin: 0;
  color: $darkgray;
  @include font-size(16);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: $deepgray;
  margin-bottom: 0;
  font-weight: 500;
}

h1 {
  @include font-size(40);
  display: inline-block;
  margin: 1.6rem 0;

  @media screen and (max-width: 600px) {
    margin-top: 0;
  }
}

h2 {
  border-top: 1px solid $lightgray;
  clear: both;
  @include font-size(32);
  margin-top: 4rem;
  padding-top: 4rem;

  @include marketing-pages($extraSelectors: ('.page-api'), $nestParentSelector: true) {
    border-top: 0;
    margin-top: 2rem;
    padding-top: 0;
  }
}

h3 {
  @include font-size(24);
  margin-top: 3rem;
  clear: both;
}

h4 {
  @include font-size(20);
  margin-top: 3rem;
  clear: both;
}

h5 {
  @include font-size(18);
  margin-top: 2rem;
  clear: both;
}

h6 {
  @include font-size(16);
  color: $mediumgray;
  margin-top: 2rem;
  clear: both;
}

h2,
h3,
h4,
h5,
h6 {
  a {
    font-size: inherit;
  }

  @media screen and (max-width: 600px) {
    margin: 8px 0;
  }
}

.mat-tab-body-wrapper h2 {
  margin-top: 0;
}

p,
ol,
ul,
ol,
li,
input,
a {
  @include font-size(16);
  @include line-height(32);
  font-family: inherit;
  font-weight: 400;
  color: $darkgray;

  & > em {
    @include letter-spacing(0.3);
  }
}

p {
  margin: 1em 0;
}

p + ul {
  margin-top: 4px;
}

ol {
  li,
  p {
    margin: 4px 0;
  }
}

ol ol {
  list-style-type: lower-alpha;

  ol {
    list-style-type: lower-roman;
  }
}

li {
  padding-bottom: 8px;
  @include line-height(24);

  p {
    margin: 0;
  }
}

a {
  text-decoration: none;
}

.app-toolbar a {
  @include font-size(16);
  font-weight: 400;
  color: $white;
  font-family: $main-font;
  text-transform: uppercase;
}

strong {
  font-weight: 500;
}

table {
  border-collapse: collapse;
  border-radius: 2px;
  border-spacing: 0;
  margin: 12px 0 32px;
}

table tbody th {
  max-width: 100px;
  padding: 13px 32px;
  text-align: left;
}

td {
  font-weight: 400;
  padding: 8px 30px;

  > p,
  ul {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}

th {
  @include font-size(16);
  font-weight: 500;
  padding: 13px 32px;
  text-align: left;
}

code {
  font-family: $code-font;
  font-size: 90%;
  color: $darkgray;
}

.sidenav-content a {
  color: $blue;

  &:hover {
    text-decoration: underline;
  }
}

// The following css rule adds an icon to external links in the docs area, based on the classes that are applied to the
// `doc-viewer` component when it is displaying docs for the different areas of the documentation.
// We add the icon to all external links which are identified as absolute links (those that start with `http:` or https:`).
// For more info see PR #36601.
@include docs-pages {
  aio-doc-viewer {
    // The docs-viewer also contain links to GitHub (e.g. the "edit this page" icon) identified with
    // the `.github-links` class. We don't want to add the external link icon to these links.
    :not(.github-links) {
      > a {
        &[href^="http:"],
        &[href^="https:"] {
          display: inline-flex;
          padding-right: calc(1em + 0.25rem);
          position: relative;

          &::after {
            content: "open_in_new";
            font-family: "Material Icons";
            position: absolute;
            right: 0;
          }
        }
      }
    }
  }
}

.error-text {
  color: $brightred;
}
